<template>
  <nut-popup
    position="bottom"
    round
    closeable
    :style="{ height: '50%' }"
    v-model:visible="props.addressShow.goodShow"
  >
    <view class="title">货物规格</view>
    <view class="list">
      <nut-cell title="货物长度">
        <template v-slot:link>
          <view class="countBox">
            <nut-input-number min="1" v-model="goodMsg.goodLength" />
          </view>
          <view style="font-weight: 600; color: black"
            >&nbsp;&nbsp;&nbsp;cm</view
          >
        </template>
      </nut-cell>
      <nut-cell title="货物宽度">
        <template v-slot:link>
          <view class="countBox">
            <nut-input-number min="1" v-model="goodMsg.goodWidth" />
          </view>
          <view style="font-weight: 600; color: black"
            >&nbsp;&nbsp;&nbsp;cm</view
          >
        </template>
      </nut-cell>
      <nut-cell title="货物高度">
        <template v-slot:link>
          <view class="countBox">
            <nut-input-number min="1" v-model="goodMsg.goodHeight" />
          </view>
          <view style="font-weight: 600; color: black"
            >&nbsp;&nbsp;&nbsp;cm</view
          >
        </template>
      </nut-cell>
    </view>
    <view class="bottomBtn">
      <nut-button
        style="width: 350px"
        color="#0966FF"
        size="large"
        type="primary"
        @click="chooseGood"
        >确&nbsp;&nbsp;定</nut-button
      >
    </view>
  </nut-popup>
</template>
<script lang="ts" setup>
import { onMounted, ref, reactive, watch } from "vue";
const props = defineProps<{
  addressShow: {
    WDShow: boolean;
    goodShow: boolean;
  };
}>();
const emit = defineEmits<{
  (
    e: "chooseGood",
    Cargo: {
      goodLength: number;
      goodWidth: number;
      goodHeight: number;
    }
  ): void;
}>();
const radioVal = ref();
function chooseGood() {
  emit("chooseGood", goodMsg.value);
}
const goodMsg = ref<{
  goodLength: number;
  goodWidth: number;
  goodHeight: number;
}>({
  goodLength: 1,
  goodWidth: 1,
  goodHeight: 1,
});
</script>
<style lang="less">
.title {
  font-size: 32rpx;
  line-height: 100rpx;
  font-weight: 600;
  padding-left: 30rpx;
  height: 100rpx;
}
.list {
  //   margin-top: 100rpx;
  padding: 1rpx 24rpx;
  height: 68%;
  background: rgb(235, 235, 235);
  box-sizing: border-box;
}

.bottomBtn {
  //   margin-left: -20rpx !important;
  padding: 0 25rpx;
  width: 750rpx;
  position: fixed;
  bottom: 10rpx;
  height: 120rpx;
}
</style>
